<template>
  <div class="music-playlist-main">
    <v-popup style="overflow-y: scroll" :provideName="provideName">
      <div style="display: flex;width: 100%;height: 100%;align-items: center;justify-content: center" v-if="musicPlayListIds.length <= 0">
        <span>播放列表暂无内容</span>
      </div>
      <SongList v-else :songs="songData">
        <template v-slot:actions="{index,id}">
          <van-button class="icon-btn" round
                      color="red"
                      size="small"
                      @click="deletePlayLists(index)"
          >
            <van-icon class="icon" class-prefix="music" name="shanchu" />
          </van-button>
        </template>
      </SongList>
    </v-popup>
  </div>
</template>

<style scoped>
.music-playlist-main:deep(.van-overlay){
  z-index: 2000 !important;
}
.music-playlist-main:deep(.van-popup){
  z-index: 2001 !important;
}
</style>

<script setup>

import {computed, defineProps, ref, watch} from "vue";
import SongList from "../../components/list/SongList.vue";
import {useStore} from "vuex";
import {getSongDetail} from "../../api/api";
import {Dialog} from "vant";

let songData = ref([]);

let store = useStore();

let musicPlayListIds = computed(() => store.state.music.musicPlayListIds);

let handleFinishIds = [];

watch(musicPlayListIds, () => {
  getMusicDetails();
}, {
  deep: true,
  immediate: true
});

function getMusicDetails(){
  let handleIds = musicPlayListIds.value.filter((id) => {
    if (handleFinishIds.indexOf(id) === -1) {
      handleFinishIds.push(id);
      return true;
    }
    return false;
  });
  if (handleIds.length > 0) {
    getSongDetail(handleIds).then((res) => {
      songData.value.push(...res.songs);
    });
  }
}

function deletePlayLists(index){
  Dialog.confirm({
    message:"你确定要删除列表中这个音乐吗？"
  }).then(()=>{
    store.commit("music/removeMusicPlayListsData",index);
    songData.value.splice(index,1);
  }).catch(()=>{

  })

}

let propsDef = defineProps({
  provideName: String
});
</script>

<style scoped>

</style>